<template>
  <div class="block">
    <template v-for="(item,index) in block.agendaDtos">
      <div :key="index" style="height: 100%">
        <div class="conflict">
          <el-tooltip :content="setConfig(item, 'content')" placement="top-start">
            <div class="mask-main" :style="setConfig(item, 'style')">{{ setConfig(item, 'text') }}</div>
          </el-tooltip>
        </div>
        <el-tooltip :content="setContent(item)" placement="top-start">
          <div :id="item.id" :style="occupy(item)" class="bar">
            <slot :item="item" />
          </div>
        </el-tooltip>
      </div>
    </template>
  </div>

</template>

<script>
import moment from 'moment'
import DateFormatEnum from '@model/enum/DateFormatEnum'
import { safeNewDate } from '@src/util/time';
import { formatDate } from 'pub-bbx-utils';
export default {
  name: 'chart-block',
  inject: ['ganttChartInstance'],
  props: {
    block: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      content: '',
    }
  },
  methods: {
    setContent(bar){
      return `${formatDate(safeNewDate(bar.startTime), 'yyyy-MM-dd HH:mm')} ${this.$t('common.base.to')} ${formatDate(safeNewDate(bar.endTime), 'yyyy-MM-dd HH:mm')}`
    },
    occupy(bar) {
      const during = moment(bar.endTime).diff(moment(bar.startTime), 'minute')
      const spendMinute = moment(moment(bar.startTime)).diff(
        moment(`${this.ganttChartInstance.timeSectionDayJs.startTime.format('YYYY/MM/DD')} 00:00:00`),
        'minute'
      )  

      const color = '#FAAB0C'
      return {
        width: `${(this.ganttChartInstance.baseHour * during) / 60}px`,
        left: `${(spendMinute / 60) * this.ganttChartInstance.baseHour}px`,
        backgroundColor: color,
        opacity: 0.35
      }
    },
    setConfig(item, type) {
      // 忙碌的开始时间和结束时间
      const busyStartTime = formatDate(new Date(item.startTime), 'yyyy-MM-dd HH:mm:ss')
      const busyEndTime = formatDate(new Date(item.endTime), 'yyyy-MM-dd HH:mm:ss')
      // 计划的开始时间和结束时间
      let { startTime, endTime } = this.ganttChartInstance.timeSectionDayJs
      const planeStartTime = startTime.format(DateFormatEnum.YTMHMS);
      const planeEndTime = endTime.format(DateFormatEnum.YTMHMS);
      let start = '';
      let end = '';
      // 计算忙碌时间和计划时间的交集
      if (busyStartTime >= planeStartTime && busyStartTime <= planeEndTime) {
        start = busyStartTime;
        end = planeEndTime;
        if(busyEndTime <= planeEndTime) end = busyEndTime;
      }
      if (planeStartTime >= busyStartTime && planeStartTime <= busyEndTime) {
        start = planeStartTime;
        end = busyEndTime;
        if(planeEndTime <= busyEndTime) end = planeEndTime
      }
      
      if(start && end) {
        // 计算冲突时间的位置
        if(type === 'style') {
          // 完成时间和开始时间间隔
          let time = moment(moment(end)).diff(start, 'second')
          // 开始时间已经过去的分钟
          const diff = moment(moment(start)).diff(
            moment(`${this.ganttChartInstance.timeSectionDayJs.startTime.format('YYYY/MM/DD')} 00:00:00`),
            'minute'
          )
          return {
            left: `${ this.ganttChartInstance.baseHour * diff / 60 }px`,
            width : `${ this.ganttChartInstance.baseHour * time / 3600 }px`,
            height: `${ this.$parent?.$el?.clientHeight }px`
          }
        }
        // 返回冲突的提示
        if(type === 'content') {
          return `${this.$t('calendar.conflict')}:${formatDate(safeNewDate(start), 'yyyy-MM-dd HH:mm')} ${this.$t('common.base.to')} ${formatDate(safeNewDate(end), 'yyyy-MM-dd HH:mm')}`
        }
        if(this.ganttChartInstance?.acceptEnable && type === 'text' && moment(moment(end)).diff(moment(start), 'minutes') >= 60) {
          return this.$t('calendar.conflict')
        }
      }
    },
  },
}
</script>

<style scoped lang="scss">
.block {
  height: 40px;
  background-image: url('../../../../assets/img/gantt/background.png');
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}
.bar {
  display: flex;
  justify-content: center;
  position: absolute;
  height: 40px;
  color: #595959;
  user-select: none;
}
.conflict {
  z-index: 120;
  position: sticky;
  top: 0;
  .mask-main{
    position: absolute;
  //  background: #7EAD66;
    height: 40px;
    font-size: 13px;
    font-weight: normal;
    line-height: 19px;
    color: #FFFFFF;
    margin: 4px 0 0 4px;
  }
}
</style>
